<template>
    <div class="main">
        <view class="top" :style="{ top: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view v-if="ok" class="user dispaly-just-between" @click="navTo(`/subPackage/mine/setting/userInfo`)">
                <view class="user-info dispaly-center">
                    <view class="avatar">
                        <image mode="aspectFill" :src="myInfo?.avatar" />
                    </view>
                    <view class="name">
                        {{ myInfo?.nickname }}
                    </view>
                </view>
                <view class="right">
                    <tn-icon name="right" color="#b7b7b7" size="40" />
                </view>
            </view>
            <view v-else class="login" @click="navTo('/subPackage/mine/login/login')">请先登录</view>
            <view class="record dispaly-just-between">
                <view class="item dispaly-col-center" @click="navTo(`/subPackage/mine/followManage`)">
                    <view class="num">{{ myInfo?.care_num }}</view>
                    <view class="name">我的关注</view>
                </view>
                <view class="item dispaly-col-center" @click="navTo(`/subPackage/mine/browse`)">
                    <view class="num">{{ myInfo?.foot_num }}</view>
                    <view class="name">浏览足迹</view>
                </view>
                <view class="item dispaly-col-center" @click="navTo('/subPackage/mine/announcement')">
                    <view class="num">{{ myInfo?.notice_num }}</view>
                    <view class="name">公告</view>
                </view>
            </view>
            <view class="more ">
                <view class="title">常用功能</view>
                <view class="cy-item-box dispaly-just-between">
                    <view class="cy-item dispaly-center" @click="navTo('/subPackage/mine/myCurriculumVitae')">
                        <view class="cy-icon">
                            <image src="/static/icon/wdjl.png" />
                        </view>
                        <view class="cy-name">我的简历</view>
                    </view>
                    <view class="cy-item dispaly-center" @click="navTo('/subPackage/mine/collectJob')">
                        <view class="cy-icon">
                            <image src="/static/icon/scgw.png" />
                        </view>
                        <view class="cy-name">收藏职位</view>
                    </view>
                </view>
            </view>
            <view class="more ">
                <view class="title">其他功能</view>
                <view class="op-item-box">
                    <view class="op-item dispaly-just-between" @click="skipPage(item)"
                        v-for="(item, index) in optionData" :key="item.type">
                        <view class="item-left dispaly-center">
                            <view class="left-icon">
                                <image :src="item.icon" />
                            </view>
                            <view class="left-name">{{ item.name }}</view>
                        </view>
                        <view class="item-right">
                            <tn-icon name="right" color="#b7b7b7" size="30" />
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </div>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { onShow } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue';
import { getElementHeight } from '@/utils/util'
import { getMyInfo } from '@/api/home/home'
import type { MyInfoType } from '@/types/responseData'

// 获取我的信息
let myInfo = ref<MyInfoType>()
const getMyInfoData = async () => {
    const res = await getMyInfo({ user_id: 2 })
    if (res.code == 0) {
        myInfo.value = res.data
    }
}

onShow(() => {
    getMyInfoData()
})

let ok = ref<boolean>(true)
interface OptionDataType {
    name: string,
    icon: string,
    type: number,
    path: string,
}
const optionData = ref<Array<OptionDataType>>([
    { name: '我的评论和回复', icon: '/static/icon/msg.png', type: 1, path: '/subPackage/mine/commentMessage' },
    { name: '绑定外部账号', icon: '/static/icon/bd.png', type: 2, path: '' },
    { name: '名师入驻', icon: '/static/icon/teacher.png', type: 5, path: '/subPackage/mine/teacherEnter/pageOne' },
    { name: '系统设置', icon: '/static/icon/setting.png', type: 3, path: '/subPackage/mine/setting/systemSetting' },
    { name: '意见反馈', icon: '/static/icon/fk1.png', type: 4, path: '/subPackage/mine/feedback' }
])

// 跳转其他功能
const skipPage = (item: OptionDataType) => {
    if (item.path) {
        navTo(item.path)
    } else {
        uni.showToast({
            title: '正在开发',
            icon: 'none'
        })
    }
}

let systemInfo = uni.getStorageSync('systemInfo')

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    const height = await getElementHeight('.top')
    topNavheight.value = height
})


</script>

<style>
page {
    background: rgb(155, 227, 229);
    background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(244, 244, 246, 1) 36%, rgba(244, 244, 246, 1) 100%);
}
</style>

<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #fff !important;
}

.login {
    font-size: 50rpx;
}

.main {}


.top {
    padding: 0 60rpx;
    position: fixed;
    z-index: 999;
    width: 100%;
    padding-bottom: 20rpx;

    .user {
        .user-info {
            .avatar {
                margin-right: 20rpx;

                image {
                    width: 116rpx;
                    height: 116rpx;
                    border-radius: 50%;
                }
            }

            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 36rpx;
                color: #000000;
            }
        }
    }

    .record {
        margin-top: 46rpx;

        .item {
            .num {
                font-family: DIN, DIN;
                font-weight: 500;
                font-size: 36rpx;
                color: #414141;
            }

            .name {
                margin-top: 10rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #414141;
            }
        }
    }

    .more {
        padding: 33rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-top: 35rpx;

        .title {
            margin-bottom: 22rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #000000;
        }

        .cy-item-box {
            padding: 0 30rpx;

            .cy-item {
                .cy-icon {
                    margin-right: 10rpx;

                    image {
                        width: 76rpx;
                        height: 76rpx;
                    }
                }

                .cy-name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #000000;
                }
            }
        }

        .op-item-box {
            margin-top: 33rpx;

            .op-item:last-child {
                margin-bottom: 0;
            }

            .op-item {
                margin-bottom: 56rpx;

                .item-left {
                    .left-icon {
                        margin-right: 28rpx;
                        padding-top: 10rpx;

                        image {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .left-name {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #000000;
                    }
                }
            }
        }
    }
}
</style>